<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>通讯录</title>
    <link href="css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <style type="text/css">
     .pro-time{
     	font-size: 1.2rem;
     	color: #999;
     	margin: 5px 0px;
     }
     .pro-time span{
     }
     .sech{
    		background: #fff;
    		height: 50px;
    		line-height: 50px;
	}
	#search{
		background-color: #eee;
		border: none;
		height: 30px;
		width: 92%;
		border-radius: 18px;
		text-indent: 7px;
	}
	input::-webkit-input-placeholder {
	  /* WebKit browsers */
	  text-align: center;
	}
	input:-moz-placeholder {
	  /* Mozilla Firefox 4 to 18 */
	  text-align: center;
	}
	input:-ms-input-placeholder {
	  /* Internet Explorer 10 */
	  text-align: center;
	}
	input::placeholder {
	  text-align: center;
	}
	.ab-name{
		font-size: 1.8rem;
		color: #333333;
	}
	.ab-phone{
		font-size: 1.4rem;
		color: #333333;
	}
	.abook img{
		width: 15px;
		margin-left: 18px;
		margin-right: 6px;
	}
	.abook{
		padding: 15px 0;
		margin-right: 15px;
		border-bottom: 1px solid #eee;
	}
	.address{
		padding-right: 15px;
	}
    </style>
</head>
<body>
	<header class="nav">
		<i class="iconfont icon-fanhui" style="float: left;"></i>
	    <span>通讯录</span>
	</header>
	<div class="content" style="padding: 0 15px;">
		<div class="sech">
			<input type="" name="" id="search" value="" placeholder="搜索"/>
			<img id="sicon" src="img/sear.png" style="width: 15px;position: absolute;left: 42%;top: 68px;"/>
		</div>
		<div class="address">
			<div class="abook">
				<div><span class="ab-name">王XX</span><img src="img/ab_03.png"/><span class="ab-phone">478324324</span></div>
				<p class="pro-time">部门：<span>市委组织部</span></p>
				<p class="pro-time">职务：<span>市委组织部</span></p>
			</div>
			<div class="abook">
				<div><span class="ab-name">王XX</span><img src="img/ab_03.png"/><span class="ab-phone">478324324</span></div>
				<p class="pro-time">部门：<span>市委组织部</span></p>
				<p class="pro-time">职务：<span>市委组织部</span></p>
			</div>
		</div>
	</div>
    <script src="js/common.js"></script>
    <script type="text/javascript">
		window.onload=function(){
    		document.getElementById('search').addEventListener('input',function(){
    			if(this.value!=''){
    				document.getElementById('sicon').style.display='none';
    			}else{
    				document.getElementById('sicon').style.display='block';
    			}
    		})
    	}
    </script>
</body>
</html>